<template>
	<view class="home">
		<custom-navbar :title="supplyData.product_name" :show-back="true" @back="handleBack" />

		<view class="content" :style="{ paddingTop: navBarHeight + 'px' }">
			<view class="commodity ">
				<image class="bg" :src='supplyData.image'></image>
				<view class="collect fcc" @click="getsaveCollection()">
					<image v-if="supplyData.is_collection == 0" class="icon" src="/static/images/supply/星.svg"></image>
					<image v-else-if="supplyData.is_collection == 1" class="icon"
						src="/static/images/supply/供需大厅已收藏.svg"></image>
				</view>
			</view>
			<view class="introduce ">
				<view class="mb45">{{supplyData.product_subtitle}}</view>
				<up-line></up-line>
				<view class="fcsb mt30 mb30">
					<view class="fc">
						<view class="f245c9">参数</view>
						<view class="f245c3 ml30">{{supplyData.product_category_text}}</view>
					</view>
					<image class="more" src="/static/images/supply/更多.svg"></image>
				</view>
				<mp-html :content="supplyData.supply_demand_datail" />
				<!-- <image class="bg" :src="supplyData.brief"></image> -->
			</view>
		</view>
		<view class="abutment p2030">
			<view @click="showModal = true" class="btn fcc f24bcf">
				<view>我要对接</view>
			</view>
		</view>
		<supplyModal v-model:visible="showModal" title="我要联系" @confirm="handleConfirm" @cancel="handleCancel">
			<view>
				<view class="item fcols">
					<view class="flex mb30">
						<image class="img" src='/static/images/supply/enterprise.svg'></image>
						<view class="ml27">
							<view class="f225c9 mb4">企业名称</view>
							<view class="f26bc3" v-if="supplyData.enterprise">
								{{supplyData.enterprise.enterprise_name}}
							</view>
						</view>
					</view>
					<up-line></up-line>
				</view>
				<view class="item fcols">
					<view class="flex mb30">
						<image class="img" src='/static/images/supply/linkman.svg'></image>
						<view class="ml27">
							<view class="f225c9 mb4">联系人</view>
							<view class="f26bc3" v-if="supplyData.enterprise">{{supplyData.enterprise.contact_person}}
							</view>
						</view>
					</view>
					<up-line></up-line>
				</view>
				<view class="item fcols">
					<view class="flex mb30">
						<image class="img" src='/static/images/supply/ihpone.svg'></image>
						<view class="ml27">
							<view class="f225c9 mb4">联系电话</view>
							<view class="f26bc3" v-if="supplyData.enterprise">{{supplyData.enterprise.contact_number}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</supplyModal>
	</view>

</template>

<script setup>
	import CustomNavbar from '@/components/custom-navbar.vue'
	import supplyModal from '@/components/supplyModal.vue';
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		SupplyDetail
	} from '@/api/supply'; // 你的 API 方法
	import {
		saveCollection
	} from '@/api/login'; // 你的 API 方法
	// 2. 获取系统信息（同步操作放在setup最前面）
	const systemInfo = uni.getSystemInfoSync()

	// 3. 定义响应式数据
	const searchKey = ref('')

	// 4. 计算属性
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)
	// 供需大厅

	const supplyData = ref({})

	const handleBack = () => {
		uni.navigateTo({
			url: '/pages/supply/supply'
		});
	};
	const sd_id = ref('');

	onLoad((options) => {
		sd_id.value = options.sd_id;

		// 调用 API 获取详情
		getSupplyDetail()
	});
	const showModal = ref(false);
	const supplyList = ref([{
			img: '/static/images/supply/enterprise.svg',
			tilte: '企业名称',
			name: '爱玛电动车天津公司',
			line: true
		},
		{
			img: '/static/images/supply/linkman.svg',
			tilte: '联系人',
			name: '张先生',
			line: true
		},
		{
			img: '/static/images/supply/ihpone.svg',
			tilte: '联系电话',
			name: '0755-86971991',
			line: false
		},

	])
	const getSupplyDetail = async () => {
		// 调用 API 获取详情
		await SupplyDetail(sd_id.value).then(res => {
			if (res.code == 200) {
				supplyData.value = res.data
			}
			// console.log('详情数据:', res);
		});
	}
	const getsaveCollection = async () => {
		const parmas = {
			type: 2,
			collection_id: sd_id.value
		}
		try {
			const Res = await saveCollection(parmas)

			if (Res.code = 200) {

				if (supplyData.value.is_collection == 0) {
					uni.showToast({
						title: '收藏成功',
						icon: 'success'
					})

				} else {
					uni.showToast({
						title: '取消收藏成功',
						icon: 'success'
					})
				}

				getSupplyDetail()
			} else {
				throw new Error(res.message || '收藏失败')
			}
			// console.log(Res)
		} catch (error) {
			console.error('收藏失败:', error)
		}
	};
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		position: relative;

		.content {
			padding-top: var(--status-bar-height);
			padding-top: calc(var(--status-bar-height) + 70rpx);
			/* 导航栏高度 */
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.commodity {
				width: 100%;
				height: 674rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				position: relative;

				.bg {
					width: 100%;
					height: 100%;
				}

				.collect {
					width: 80rpx;
					height: 80rpx;
					background: #000000;
					border-radius: 50%;
					opacity: 0.2;
					position: absolute;
					top: 30rpx;
					right: 30rpx;

					.icon {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			.introduce {
				width: 750rpx;
				// height: 2876rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				padding: 38rpx 30rpx 0 30rpx;
				box-sizing: border-box;

				.more {
					width: 20rpx;
					height: 20rpx;
				}


			}
		}

		.abutment {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(41, 44, 54, 0.2);
			border-radius: 0rpx 0rpx 0rpx 0rpx;

			.btn {
				width: 100%;
				height: 80rpx;
				background: linear-gradient(90deg, #398DFB 0%, #61DBFF 100%);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
			}
		}

		.item {
			height: 130rpx;
			width: 100%;

			.flex {
				padding-top: 30rpx;
				box-sizing: border-box;
			}

			.img {
				width: 70rpx;
				height: 70rpx;
			}
		}
	}
</style>